More on
Quarto + Reveal.js

Another completely useless presentation

2024-03-28

Disclaimer

This is a companion testflight of the former. In this slide, I will test some advanced features of reveal.js for my personal use. The features come mostly from Quarto-Revealjs. This is source repo.

🐈🐈🐈

  • 이 PT는 이 프로젝트의 좀 고급진 장난질입니다. 내용은 무시하고 기능만 봐주세요.
  • Quarto+reveal.js에서 개인적으로 필요한 요소들을 구현했습니다.

1 Checkpoint

1.1 알아두면 좋을 것

1.2 이전 버전과 달라진 것

  • theme를 세가지 구조로 재조직
    • format.scss: 전체적인 포맷
    • customs.scss: 커스터마이즈
    • theme-dark.scss, theme-light.scss: 테마 컬러 선택
  • customs.scss 특화

2 확장 다루기(_Extensions)

2.1 Slide Header

  • 슬라이드 헤더는 어떻게 붙이는가?
  • 좋은 애드온이 있다. 애드온에 대한 설명은 아래 참고
  • reveal-header
  • 커스터마이즈를 위해서는 css를 수정하면 된다.
    • 아래는 --my-brightness를 조절해 섹션 헤더의 밝기를 조절하는 코드다.
.reveal .reveal-header .sc-title p,
.reveal .reveal-header .sb-title p {
  font-size: max(10px, 1vw);
  filter: brightness(0.85);
}
  • 마지막 페이지에서 헤더가 이상하게 뜨는 버그가 있다.
    • 아직 해결책을 찾지 못했다…
    • 의도는 --my-brightness를 조절해 헤더를 표시되지 않게 하는 것

3 Quarto with (S)CSS!

3.1 CSS what, where

  • scsscss든 불러올 수 있다.
  • theme에서 불러오는 것이 대체로 제대로 먹힌다.
  • 현재 이 슬라이드에는 customs.scss(🔗 LINK)가 적용되어 있다.
    • .reveal .reveal-header .sc-title 설정
    • 제목에서 본문까지 거리 조절
    • 캡션 텍스트 가운데 정렬
    • 섹션 헤더 설정
    • 페이지 표시 예외 페이지 설정
    • 로고 색깔 레벨 (로고 지우는 데 필요)

3.2 CSS working?

  • customs.scss에 있는 내용이 잘 작동하는가?
    • css에서 그림의 캡션이 가운데로 오도록 정렬했다.
탑건 냥이

자는 냥이

4 기타 기믹들

4.1 배경색 조정하기

  • theme-dark.scss를 테마에 포함한다.
  • 올 블랙이 부담스러워서 조금 톤다운을 했다.
$body-bg: #303030;

4.2 Numbering section

  • yml에서 설정해주면 된다.
number-sections: true
  • # 제목 뒤에 {} 안에 설정하면 개별 슬라이드에서 통제 가능하다.
    • .unlisted: toc에서 뺀다.
    • .unnumbered: 번호를 뺀다.

4.4 단어 색깔 바꾸기

  • 단어 하나의 색깔만 바꿔보자.
  • 다른 형식은 바뀌지 않아야 한다.
  • How does it look like in English?

4.6 종으로 긴 그림

  • 마찬가지로 right, height의 적당한 조절이 필요하다.
  • 그런데 로고를 어떻게 없앴나?
  • 여기를 참고하라.
    • customs.css에 slide-logo 관련 추가
    • 없애고 싶은 페이지에서
    • background-color="#303030"

4.7 객체 위치 설정 1

 

 

  • 텍스트는 여기 있습니다.
  • 좀 더 올려붙일 수 없나요?

4.8 객체 위치 설정 2

 

 

  • 텍스트를 이렇게 올려 붙였습니다!
  • css 스타일을 지정해 해결할 수 있다.
    • margin-x 스타일로 쓰자. x: top, bottom, left, right
:::{style="margin-top:-50px;"} 
 TEXT TO BE UPPLIFTED
:::

4.9 객체 위치 선정 3

  • 이 녀석은 아기고양이인가?
  • 이 녀석은 귀여운 고양이인가?
  • 요 놈은 고양이인가?
  • 이 예에서 볼 수 있듯이, {layout...} 내에서 css는 먹지 않는다.
  • layout과 같은 수준에서 css를 먹이면 이 예시처럼 잘 먹는다.
  • 각 개별 해설 부분에서 margin-x는 먹는데 다른 css는 먹지 않는다…

4.10 객체 위치 선정 4

  • 객체를 올려 붙이는 또다른 방법이 있다.
:::{style="position:relative; top: -50px;"}
  • css의 상대적 위치 잡기를 사용하는 것이다.
  • 앞서 소개한 margin-x 방법과 비슷하지만 미묘하게 다르게 작동한다.
  • 둘 다 알아두면 좋겠다.

4.11 TOC, Page Number, Counts

  • .unlisted: TOC에 올라가지 않는다.
  • .unnumbered: 번호가 매겨지는 경우 번호가 빠진다.
  • visibility="uncounted": 페이지 카운트에서 제외된다.

4.12 Page Number 표기 안되게 하기

.reveal .slide-number > a[href*='end-of-document'] {
  display: none;
}
  • scss에서 슬라이드 타이틀([...])을 지정해서 slide-number를 지울 수 있다.
  • 위의 예는 “End of Document” 슬라이드에서 페이지 넘버 표기를 지우는 코드다.

4.13 callout 1: Font Size

Warning

  • Note that there are five types of callouts, including: note, warning, important, tip, and caution.
  • 한글은요? 잘 나와요?
  • icon=false 옵션과 함께 쓰자. 아이콘 사이즈는 아직 줄이지 못했다…
  • ::: {.callout-warning icon="false" style="font-size: 80%;"}를 활용했다.

4.14 callout 2: Customization

  • 박스의 넓이, 위치, 폭 등을 자유롭게 조정할 수 있다.
  • 박스 아래 padding이 너무 크다면 아래 코드를 참고하라.

중국집 메뉴

짜장면, 짬뽕, 볶음밥, 유니 짜장, 팔보채, 양장피
누룽지탕, 유린기, 깐풍기, 해삼주스

:::: {.callout-note icon=false appearance="simple" style="font-size: 1em; font-weight: 600; position:relative; left: 200px; top: -40px; width: 70%;"}

## 중국집 메뉴 

:::{style="margin-bottom: -5px;"}
짜장면, 짬뽕, 볶음밥, 유니 짜장, 팔보채, 양장피 <br>
누룽지탕, 유린기, 깐풍기, 해삼주스 
:::

::::

5 Unsolved

5.1 List of The Unsolved

End of Document

Q & A